<style type="text/css">
    .ui.table thead tr th, .ui.table tbody tr td{
        text-align:center;
    }
</style>
<div class="cont">
    <div class="position "><img alt="位置图标" src="dist/images/position.png"/>个人中心&gt;日程管理</div>
    <div class="menus">
        <div class="menus_top">
            <div class="menus_l"><img alt="查看方式图标" src="dist/images/zt.png"/>查看方式</div>
            <ul id="nav">
                <li class="selected"><a ng-click="getEventList(4)">全部</a></li>
                <li><a ng-click="getEventList(1)">我负责的</a></li>
                <li><a ng-click="getEventList(2)">下属负责的</a></li>
                <li><a ng-click="getEventList(3)">我创建的</a></li>
            </ul>
            <div style="margin:0 10px 0px 20px;margin-top: 10px;">
                <a class="show_style" ng-click="viewEventList('today')" id="today" style="margin-left:20px;">今日日程</a>
                <a class="show_style" ng-click="viewEventList('week')" id="week">本周日程</a>
                <a class="show_style" ng-click="viewEventList('month')" id="month">本月日程</a>
            </div>
            <ol style="margin-top:-25px;">
                <li><a ng-click="showAdd()" class="btn">添加日程</a></li>
            </ol>
        </div>
        <div class="menus_con">
            <ul>
                <li>
                    <label for="textfield" class="li_lable">负责人</label>
                    <input type="text" ng-model="s_owner" placeholder="负责人" ng-keyup="$event.keyCode == 13 && search()">
                </li>
                <li>
                    <label for="textfield" class="li_lable" >标题</label>
                    <input type="text" ng-model="s_title"  placeholder="标题" ng-keyup="$event.keyCode == 13 && search()">
                </li>
                <li>
                    <label for="textfield" class="li_lable"  style="float:left;">开始时间</label>
                    <div class="ui left icon input">
                        <input name="starttime" id="starttime" placeholder="开始时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" value="" ng-keyup="$event.keyCode == 13 && search()">
                        <i class="calendar icon"></i>
                    </div>
                </li>  
                <a ng-click="search()">搜索</a>
            </ul>
        </div>
        <div class="menus_table">
            <table class="ui column table">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>地点</th>
                        <th>负责人</th>
                        <th colspan="2">操作</th>
                    </tr>
                </thead>
                <tbody ng-show="eventList_status==1">
                    <tr ng-repeat="vevent in events">
                        <td><a href="" ng-click="showevents()" style="cursor: pointer;text-decoration:underline;">
                            {{vevent.title}}</a></td>
                        <td>{{vevent.starttime}}</td>
                        <td>{{vevent.endtime}}</td>
                        <td>{{vevent.location}}</td>
                        <td>{{vevent.nickname}}</td>
                        <td><img src="dist/images/edit.png" rel="{{vevent.event_id}}" ng-click="showEdit()" ng-show="vevent.audit_res != 1 " alt="编辑按钮" title="编辑"/></td>
                        <td><img src="dist/images/del.png" rel="{{vevent.event_id}}" ng-click="delEvent()" alt="删除按钮" title="删除"/> </td>
                    </tr>
                </tbody>
                <tbody ng-show="eventList_status!=1">
                    <tr ng-show="!busy">
                        <td colspan="7" style="text-align:center;margin-top:10px" class="null_data">没有找到数据~~~</td>
                    </tr>
                </tbody>
                <tfoot ng-if="eventpage.pageAll >1 && eventList_status==1">
                    <tr>
                        <th colspan="7">
                            <div class="ui pagination menu" jspagination page-object="eventpage" page-func="getEventList"></div>
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>             
    </div>
</div>
<!-- 添加日程 -->
<div class="ui add modal">
    <i class="close icon"></i>
    <div class="header_h4">
        添加日程
    </div>
    <div class="content">
        <form action="#" name="frm-add" id="frm-add">
            <input type="hidden" name="owner_id" ng-model="add_ownerid">
            <div class="ui form">
                <div class="fields">
                    <div class="ten wide field required">
                        <label>日程标题</label>
                        <div class="ui left icon input">
                            <input type="text" name="title" ng-model="add_title" placeholder="请填写日程标题" >
                        </div>
                    </div>
                    <div class="ten wide field">
                        <label>日程地点</label>
                        <input type="text" name="location" ng-model="add_location" placeholder="请填写日程地点" >
                    </div>
                    <div class="ten wide field">
                        <label>日程负责人</label>
                        <input type="text" name="owner" ng-model="add_owner" placeholder="请选择日程负责人" ng-click="showOwners()" >
                    </div>
                </div>
                <div class="fields">
                    <div class="five wide field required" style="margin-top:5px;">
                        <label>开始时间</label>
                        <div class="ui left icon input">
                            <input name="starttime" id="starttime" placeholder="开始时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" value="">
                            <i class="calendar icon"></i>
                        </div>
                    </div>
                    <div class="five wide field required" style="margin-top:5px;">
                        <label>结束时间</label>
                        <div class="ui left icon input">
                            <input name="endtime" id="endtime" placeholder="结束时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" value="">
                            <i class="calendar icon"></i>
                        </div>
                    </div>
                </div>
                <div class="field required" >
                    <label>日程内容</label>
                    <textarea  name="content" style="height:200px;margin-top:10px;" ng-Model="richtxtAdd" ></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="actions ">
        <div class="center">
            <div class="ui pop_btn_qd positive">确定</div>
            <div class="ui pop_btn_qx negative" >取消</div>
        </div>
    </div>
</div>
<!-- 修改日程 -->
<div class="ui edit modal">
    <i class="close icon"></i>
    <div class="header_h4">
        修改日程
    </div>
    <div class="content">
        <form action="#" name="frm-edit" id="frm-edit">
            <input type="hidden" name="event_id">
            <input type="hidden" name="content">
            <input type="hidden" name="owner_id">
            <div class="ui form">
                <div class="fields">
                    <div class="ten wide field required">
                        <label>日程标题</label>
                        <input type="text" name="title"  placeholder="请填写日程标题">
                    </div>
                    <div class="ten wide field">
                        <label>日程地点</label>
                        <input type="text" name="location"  placeholder="请填写日程地点" >
                    </div>
                    <div class="ten wide field">
                        <div class="field">
                        <label>日程负责人</label>
                        <input type="text" name="owner" id="owner" placeholder="请填写日程负责人" ng-click="showOwners2()" >
                    </div>
                    </div>
                </div>
                    <div class="inline fields" style="margin-top:5px;">
                        <div class="field required">
                            <label>开始时间</label>
                            <div class="ui left icon input">
                                <input name="starttime" id="starttime" placeholder="开始时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" value="">
                                <i class="calendar icon"></i>
                            </div>
                        </div>
                        <div class="field required">
                            <label>结束时间</label>
                            <div class="ui left icon input">
                                <input name="endtime" id="endtime" placeholder="结束时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" value="">
                                <i class="calendar icon"></i>
                            </div>
                        </div>
                    </div>
                <div class="field required">
                    <label>日程内容</label>
                    <textarea  name="content" id="content" style="height:200px;" ng-Model="richtxtEdit" ></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="actions ">
        <div class="center">
            <div class="ui pop_btn_qd positive">确定</div>
            <div class="ui pop_btn_qx negative" >取消</div>
        </div>
    </div>
</div>
<!-- 查看日程 -->
<div class="ui showevents modal">
    <i class="close icon"></i>
    <div class="header_h4">
        查看日程
    </div>
    <div class="content">
        <form action="#" name="frm-showevent" id="frm-showevent">
            <input type="hidden" name="event_id" ng-model="showevent_eventid">
            <input type="hidden" name="owner_id" ng-model="showevent_ownerid">
            <div class="ui form">
                <div class="inline fluid fields">
                    <div class="field" style="width:50%">
                        <label>日程标题:</label>
                        <div class="ui left icon input" style="width:50%" id="show_title"></div>
                    </div>
                    <div class="field" style="width:50%">
                        <label>日程地点:</label>
                        <div class="ui left icon input" style="width:50%" id="show_location"></div>
                    </div>
                </div>
                <div class="inline fluid fields">
                    <div class="field" style="width:50%">
                        <label>开始时间:</label>
                        <div class="ui left icon input" style="width:50%" id="show_starttime"></div>
                    </div>
                    <div class="field" style="width:50%">
                        <label>结束时间:</label>
                        <div class="ui left icon input" style="width:50%" id="show_endtime"></div>
                    </div>
                </div>
                <div class="inline fluid fields">
                    <div class="field" style="width:50%">
                        <label>日程负责人:</label>
                        <div class="ui left icon input" style="width:50%" id="show_owner"></div>
                    </div>
                </div>
                <div class="field">
                    <label>日程内容:</label>
                    <div style="overflow-y:hidden; overflow-x:hidden; min-height:200px;">
                        <pre style="white-space: pre-wrap!important;word-wrap: break-word!important;" id="viewEventContentss"></pre></div>
                </div>
            </div>
        </form>
    </div>
    <div class="actions ">
        <div class="center">
            <div class="ui pop_btn_qd positive">返回</div>
        </div>
    </div>
</div>
<!-- 确认是否删除 -->
<div class="ui small del modal transition"  id="del-model" >
    <div class="header_h4">
        删除日程信息确认
    </div>
    <div class="content">
        <p></p>
    </div>
    <div class="actions ">
        <div class="center">
            <div class="ui pop_btn_qd negative">确定</div>
            <div class="ui pop_btn_qx positive" >取消</div>
        </div>
    </div>
</div>

<div class="ui small hint modal"  id="hint-model" >
    <div class="header"></div>
    <div class="content">
        <p></p>
    </div>
    <div class="actions ">
        <div class="center">
            <div class="ui pop_btn_qd positive">确定</div>
        </div>
    </div>
</div>
<!-- 选择日程负责人 -->
<div class="ui selects modal" id="selects-model">
    <i class="close icon"></i>
    <div class="header_h4">
        选择日程负责人
    </div>
    <div class="content">
        <div class="ui form">
            <div class="fields">
                <div class="ten wide field" id="seleOwner">
                    <label>选择部门</label>
                        <select name="sectors" ng-model="sectors" class="ui dropdown">
                            <option value="">请选择日程负责人</option>
                            <option ng-repeat="x in sectors_w" value="{{x.sector_id}}">{{x.sector_name}}</option>
                       </select>
                </div>
                <div class="eight wide field">
                    <label>用户名</label>
                    <input type="text" name="nickname" ng-model="nickname"  placeholder="请填写用户名"
                    ng-keyup="$event.keyCode == 13 && owner_search()">
                </div>
                <div class="three wide field" style="margin-top:20px;">
                    <button class="ui blue button" ng-click="owner_search()"><i class="ui search icon"></i>搜索</button>
                </div>
            </div>
        </div>
        <div class="ui grid row">
            <div class="ui sixteen wide column">
                <table class="ui yellow table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>岗位</th>
                        <th>Email</th>
                        <th>电话</th>
                    </tr>
                    </thead>
                    <tbody id="owner_lists">
                        <tr ng-repeat="vowner in owners">
                            <td><input name="radio_owner" type="radio" value="{{vowner.user_id}}"/></td>
                            <td>{{vowner.nickname}}</td>
                            <td>{{vowner.sector_name}}</td>
                            <td>{{vowner.role_name}}</td>
                            <td>{{vowner.email}}</td>
                            <td>{{vowner.phone}}</td>
                        </tr>
                    </tbody>
                    <tbody id="all_owner_lists">
                        <tr ng-repeat="vowner in owners_all">
                            <td><input name="radio_owner" type="radio" value="{{vowner.user_id}}"/></td>
                            <td>{{vowner.nickname}}</td>
                            <td>{{vowner.sector_name}}</td>
                            <td>{{vowner.role_name}}</td>
                            <td>{{vowner.email}}</td>
                            <td>{{vowner.phone}}</td>
                        </tr>
                    </tbody>
                    <tbody id="no_owner_lists">
                        <tr>
                            <td colspan="6" style="text-align:center;" class="null_datas">没有找到数据~~~</td>
                        </tr>  
                    </tbody>
                    <tfoot ng-if="ownerpage.pageAll >1" id="show_ownerss">
                        <tr>
                            <th colspan="6">
                                <div class="ui pagination menu" jspagination page-object="ownerpage" page-func="owner_search" ></div>
                            </th>
                        </tr>
                    </tfoot>
                    <tfoot ng-if="ownerpage_all.pageAll >1" id="show_ownerss_all">
                        <tr>
                            <th colspan="6">
                                <div class="ui pagination menu" jspagination page-object="ownerpage_all" page-func="owner_search_all" ></div>
                            </th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <div class="actions ">
        <div class="center">
            <div class="ui pop_btn_qd positive">确定</div>
            <div class="ui pop_btn_qx negative" >取消</div>
        </div>
    </div>
</div>
<!-- 系统信息弹出层 -->
<div class="ui systemerror modal transition" >
    <div class="header_h4">
        系统提示
    </div>
    <div class="content">
        <div class="inline fluid fields">
            <div class="field" style="display: inline-block;width: 5%;" ng-show="eventRcode==1">
                <i class="thumbs up large icon"></i>
            </div>
            <div class="field" style="display: inline-block;width: 5%;" ng-show="eventRcode==0">
                <i class="thumbs down large icon"></i>
            </div>
            <div class="field" style="display: inline-block;">
                <p>{{eventctMsg}}</p>
            </div>
        </div> 
    </div>
    <div class="actions ">
        <div class="center">
            <div class="ui pop_btn_qd positive">关闭</div>
        </div>
    </div>
</div>

<style type="text/css">
 a:hover{cursor: pointer;text-decoration:underline;color:Black;}
.show_style{margin-right: 30px;text-decoration:underline;cursor: pointer; color:#2185D0;}
.clicks{color:Black;text-decoration:underline;cursor: pointer;}
.menus_top{margin-top:0px;}
.menus_con{margin-top:-10px;}
.menus_table{margin-top:-15px;}
</style>
<script type="text/javascript">
    $('.ui.dropdown').dropdown();
    $(function(){
        $.fn.form.settings.rules.checktime_add = function() {
                var isValid = true;
                var starttime = $('#frm-add input[name="starttime"]').val();
                var endtime = $('#frm-add input[name="endtime"]').val();
                if(starttime && endtime && starttime > endtime)
                    isValid = false;
                else if(starttime < endtime)
                    isValid = true;
            return isValid;
        };
        $.fn.form.settings.rules.checktime_edit = function() {
                var isValid = true;
                var starttime = $('#frm-edit input[name="starttime"]').val();
                var endtime = $('#frm-edit input[name="endtime"]').val();
                if(starttime && endtime && starttime > endtime)
                    isValid = false;
                else if(starttime < endtime)
                    isValid = true;
            return isValid;
        };
        $('#frm-add').form({
             on: 'blur',
            inline : true,
            fields: {
                title: {
                    identifier: 'title',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '日程标题不能为空'
                        }
                    ]},
                    starttime: {
                    identifier: 'starttime',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '日程开始时间不能为空'
                        },{
                            type   : 'checktime_add',
                            prompt : '日程结束时间不能小于开始时间'
                        }
                    ]},
                    endtime: {
                    identifier: 'endtime',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '日程结束时间不能为空'
                        },{
                            type   : 'checktime_add',
                            prompt : '日程结束时间不能小于开始时间'
                        }
                    ]},
                content:{
                    identifier: 'content',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '日程内容不能为空'
                        }
                    ]},
            }});
        $('#frm-edit').form({
            on: 'blur',
            inline : true,
            fields: {
                title: {
                    identifier: 'title',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '日程标题不能为空'
                        }
                    ]},
                    starttime: {
                    identifier: 'starttime',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '日程开始时间不能为空'
                        },{
                            type   : 'checktime_edit',
                            prompt : '日程结束时间不能小于开始时间'
                        }
                    ]},
                    endtime: {
                    identifier: 'endtime',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '日程结束时间不能为空'
                        },{
                            type   : 'checktime_edit',
                            prompt : '日程结束时间不能小于开始时间'
                        }
                    ]},
                content:{
                    identifier: 'content',
                    rules: [
                        {
                            type   : 'empty',
                            prompt : '日程内容不能为空'
                        }
                    ]},
            }});
    });
$(".show_style").click(function(){
    $(this).addClass("clicks").siblings().removeClass("clicks"); 
  }); 
$("#nav li").click(function(){
       $(this).addClass('selected').siblings().removeClass('selected');
    });

</script>